<template>
  <scroll class="wrapper" :data="accountlist" :pullup="pullup" :pulldown="pulldown" @pulldown="loadData"  @pullup="nextpage">
    <ul class="detailofaccount">
      <li class="detacc_list_li border-bottom"  v-for="(item,key) in accountlist" :key="key">
        <span>
          <p>{{item.drawing_mode}}</p>
          <p class="time">{{item.create_time}}</p>
        </span>
        <p class="change">- {{item.drawing_money}}</p>
      </li>
    </ul>
    <PageTip :tipshow="tipshow" ></PageTip>
  </scroll>
</template>

<script>
import {getDrawingList} from '@/api/fetch'
import Scroll from "@/components/Scroll"
import PageTip from "./../MoreBoom/components/PageTip"

export default {
  name: 'DetailOfAccount',
  data () {
    return {
      page:1,
      tipshow:1,
      pulldown:true,
      pullup:true,
      accountlist: []
    }
  },
  methods: {
    loadData(){
      this.getDrawingList(1).then(res=>{
        if (res.errcode == 0) {
          this.accountlist = res.data
        }
      })
    },
    nextpage(){
      this.page=this.page+1
      this.getDrawingList(this.page).then(res=>{
        if(res.data.length > 0){
          this.accountlist = this.accountlist.concat(res.data)
        }else {
          this.page=this.page-1
          this.tipshow = 0
        }
      })
    },
    async getDrawingList (thepage) {
      const res = await getDrawingList({
        page:thepage
      })
      console.log(res)
      return  res
    }

  },
  components:{
    Scroll,
    PageTip
  },
  activated () {
    this.loadData()
  }
}
</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
  .detacc_list_li{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
      margin-left: 15px;
      display: flex;
      height: 100%;
      justify-content: space-around;
      flex-direction: column;
      font-size: 18px;
      .time{
        font-size: 16px;
        color: #acacac;
      }
    }
    .change{
      margin-right: 15px;
      font-weight: 400;
      font-size: 25px;
    }
  }
</style>
